<template>
  <el-dialog
    v-bind="$attrs"
    :title="$t('flyparam.new_table')"
    class="flyparameter-new-table"
    width="40%"
    v-on="$listeners"
    @open="handleOpen"
    @closed="close"
  >
    <el-row>
      <el-col :span="8">
        <div class="cursor-pointer" @click="() => (form.tableType = '1')">
          <img
            v-show="form.tableType === '1'"
            :src="require('@/assets/images/parameter/subprofile-active.png')"
            alt
          />
          <img
            v-show="form.tableType !== '1'"
            :src="require('@/assets/images/parameter/subprofile.png')"
            alt
          />
          <p class="text-center" :class="{ active: form.tableType === '1' }">
            {{ $t('flyparam.sub_profile_type') }}
            <el-popover
              placement="top-start"
              :title="$t('common.description')"
              width="420"
              trigger="hover"
              :content="table1Tip"
            >
              <template #reference>
                <button class="hint-button">
                  <span role="img" class="hint-svg">
                    <svg-icon icon-class="question2" />
                  </span></button
              ></template>
            </el-popover>
          </p>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="cursor-pointer" @click="() => (form.tableType = '2')">
          <img
            v-show="form.tableType === '2'"
            :src="require('@/assets/images/parameter/listobject-active.png')"
            alt
          />
          <img
            v-show="form.tableType !== '2'"
            :src="require('@/assets/images/parameter/listobject.png')"
            alt
          />
          <p class="text-center" :class="{ active: form.tableType === '2' }">
            {{ $t('flyparam.list_object_type') }}
            <el-popover
              placement="top-start"
              :title="$t('common.description')"
              width="420"
              trigger="hover"
              :content="table2Tip"
            >
              <template #reference>
                <button class="hint-button">
                  <span role="img" class="hint-svg">
                    <svg-icon icon-class="question2" />
                  </span></button
              ></template>
            </el-popover>
          </p>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="cursor-pointer" @click="() => (form.tableType = '3')">
          <img
            v-show="form.tableType === '3'"
            :src="require('@/assets/images/parameter/listvalue-active.png')"
            alt
          />
          <img
            v-show="form.tableType !== '3'"
            :src="require('@/assets/images/parameter/listvalue.png')"
            alt
          />
          <p class="text-center" :class="{ active: form.tableType === '3' }">
            {{ $t('flyparam.list_value_type') }}
            <el-popover
              placement="top-start"
              :title="$t('common.description')"
              width="420"
              trigger="hover"
              :content="table3Tip"
            >
              <template #reference>
                <button class="hint-button">
                  <span role="img" class="hint-svg">
                    <svg-icon icon-class="question2" />
                  </span></button
              ></template>
            </el-popover>
          </p>
        </div>
      </el-col>
    </el-row>
    <!--<el-form>
      <el-form-item label="Table Description">
        <el-input
          type="textarea"
          :rows="5"
          v-model="tableTip">
        </el-input>
      </el-form-item>
    </el-form>-->
    <el-form ref="form" :model="form" :rules="rules" @submit.native.prevent>
      <el-form-item prop="tableType" class="hidden" />
      <el-form-item :label="$t('flyparam.table_name')" prop="tableName">
        <el-input
          v-model="form.tableName"
          size="small"
          :maxlength="64"
          @change="() => (form.tableName = form.tableName.trim())"
        />
      </el-form-item> </el-form
    ><template #footer>
      <div>
        <el-button size="small" @click="close">{{
          $t('common.cancel')
        }}</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          @click="confirm"
          >{{ $t('common.confirm') }}</el-button
        >
      </div></template
    >
  </el-dialog>
</template>

<script>
import { createNewTable } from '@/api/parameter'

function validateTableName(rule, value, callback) {
  if (value) {
    if (/^\s+$/.test(value)) {
      // 纯空格报错
      callback(new Error(this.$t('flyparam.invalid_input')))
    }
  }
  callback()
}
export default {
  inheritAttrs: false,
  props: {
    templateId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      form: {
        tableType: '1',
        tableName: ''
      },
      rules: {
        tableName: [
          {
            required: true,
            message: this.$t('flyparam.input_enter_tip'),
            trigger: 'blur'
          },
          {
            validator: validateTableName.bind(this),
            message: this.$t('flyparam.invalid_input'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    table1Tip() {
      // 这个类型的表内的参数设计是每台终端都有各自不同的配置时使用（比如AID应用场景）
      return this.$t('flyparam.sub_profile_type_tip')
    },
    table2Tip() {
      // 这个类型的表内的参数设计是供其他关联使用的统一配置（比如单终端多商户的场景）
      return this.$t('flyparam.list_object_type_tip')
    },
    table3Tip() {
      // 这个类型的表可维护多个选项的定义，类似下拉框的选项
      return this.$t('flyparam.list_value_type_tip')
    }
  },
  methods: {
    confirm() {
      this.loading = true
      this.$refs['form'].validate((valid) => {
        if (valid) {
          createNewTable(
            { ...this.form, tableName: this.form.tableName.trim() },
            this.templateId
          )
            .then(() => {
              this.$message.success(this.$t('common.message.operation_success'))
              this.$emit('confirm', this.form.tableName)
              this.close()
            })
            .catch((err) => {
              this.$message.error(err)
            })
            .finally(() => {
              this.loading = false
            })
        } else {
          this.loading = false
          console.log('error submit!!')
          return false
        }
      })
    },
    handleOpen() {},
    close() {
      this.$refs.form.resetFields()
      this.$emit('update:model-value', false)
    }
  }
}
</script>

<style lang="scss">
.flyparameter-new-table {
  .el-dialog .el-dialog__body {
    padding: 20px;
  }
}
</style>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';
@include hintButton;

.hint-button {
  vertical-align: top;
}

.flyparameter-new-table {
  .active {
    @apply text-element-blue;
  }
}
</style>
